// eslint-disable-next-line vue/multi-word-component-names
<template>
	<div id="app">
		<el-container class="vue-container">
			<el-header class="vue-header"><Header></Header></el-header>
			<el-container>
				<!-- <el-aside
					:style="{
						width: this.$VuexStore.state.collapse ? '65px' : '200px',
					}"
					class="vue-sidebar"
					><Sidebar :menus="menus"></Sidebar
				></el-aside> -->
				<el-aside width="200px"><SideBar2></SideBar2></el-aside>
				<el-container>
					<el-main><BreadCrumb></BreadCrumb><router-view></router-view></el-main>
					<el-footer class="vue-footer" height="40px"><Footer></Footer></el-footer>
				</el-container>
			</el-container>
		</el-container>

		<!-- 
		<img alt="Vue logo" src="./assets/img/logo.png" /> -->
		<!-- <HelloWorld msg="Welcome to Your Vue.js App" />
		<HelloWorld2></HelloWorld2>
		<Header></Header> -->
	</div>
</template>

<script>
import HelloWorld from "@/components/test/HelloWorld.vue";
import HelloWorld2 from "@/components/test/HelloWorld2.vue";
import Header from "@/components/fregment/Header.vue";
import SideBar1 from "@/components/fregment/SideBar1.vue";
import SideBar2 from "@/components/fregment/SideBar2.vue";
import Main from "@/components/fregment/Main.vue";
import Footer from "@/components/fregment/Footer.vue";
import BreadCrumb from "@/components/fregment/breadcrumb.vue";
import { Breadcrumb } from "element-ui";
export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: "Layout",
	components: {
		HelloWorld,
		HelloWorld2,
		Header,
		SideBar1,
		SideBar2,
		Main,
		Footer,
		BreadCrumb,
	},
	data() {
		return {
			user: this.$TestData.user,
			menus: this.$TestData.menus,
			// webSiteInfo: this.$testData.webSiteInfo,
		};
	},
};
</script>

<style scoped>
#app {
	font-family: "monaco", "Avenir", Helvetica, Arial, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* text-align: center; */
	color: #2c3e50;
}
.el-header,
.el-footer {
	background-color: #b3c0d1;
	color: #333;
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #d3d6e6;
	color: #d21a1a;
	text-align: center;
	line-height: 200px;
}

.el-main {
	background-color: #e9eef3;
	color: #333;
	text-align: center;
	/* line-height: 160px; */
}

body > .el-container {
	margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}

/* ======== 自定义 ======== */

.vue-container {
	position: absolute;

	width: 100%;

	top: 0px;

	left: 0;

	bottom: 0;
}

.vue-header {
	padding: 0;

	z-index: 1000;
}

.vue-footer {
	line-height: 40px;

	background: #dcddd8;

	display: block;

	float: right;
}
</style>
